<template>
  <div>
    <div :class="right_menu ? 'web-bodys web-bodys-hide' : 'web-bodys'" v-if="head_show">
      <!-- 非首页头部 -->
      <div class="web-top">
        <!-- 手机头部 -->
        <div class="web-top-mobile">
          <div :class="right_menu ? ' web-nav-mobile  web-nav-mobile-hide' : ' web-nav-mobile'">
            <img @click="tohome" src="https://jingye.oss-cn-qingdao.aliyuncs.com/head/logo.png" />
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/head/menu.png" class="top-menu-img" @click="setMenu()" />
          </div>
          <div style="height:60px;"></div>
          <div class="web-banner-mobile">
            <img :src="mobile_src" alt v-if="!is_arr" />
            <div class="banner-arr" v-else>
              <!-- <img
                v-for="(item,key) in this.mobile_src"
                :src="item.src"
                :style="key == 0 ? changeBannerStyle() : ''"
              />-->
              <swiper :options="swiperOption" ref="mySwiper_banner" @slideChangeTransitionEnd="slideChangeTransitionEnd">
                <!-- slides -->
                <swiper-slide v-for="(item,key) in this.mobile_src" :key="key">
                  <img :src="item.src" alt />
                </swiper-slide>
              </swiper>
              <div class="banner-arr-slide">
                <span v-for="(item,key) in this.mobile_src" :key="key" :style="banner_index == key ? 'background:#fff;' : ''" @click.stop="changeBanner(key)"></span>
              </div>
            </div>
          </div>
        </div>
        <!-- <contact></contact> -->
        <div class="contact-box" :style="'bottom:'+ contact_height +'px'">
          <contact @backTops="backTop"></contact>
        </div>
        <!-- 电脑头部 -->
        <div class="web-top-pc" v-if="router_path != '/index/index/index'">
          <web-head :banner="pc_src"></web-head>
        </div>
      </div>
      <!-- 网站主题 -->
      <div class="web-body">
        <router-view></router-view>
      </div>
      <div>
        <foot @backTops="backTop"></foot>
      </div>
    </div>
    <!-- 侧边栏 -->
    <!-- 手机右侧菜单 -->
    <!-- 遮罩层 -->
    <div :class="right_menu ? 'right-mene-model right-mene-model-show' : 'right-mene-model'" @touchstart="closeMenu()"></div>
    <div :class="right_menu ? 'web-right-menu web-right-menu-show' : 'web-right-menu'">
      <mobile-menu @close="closeMenu"></mobile-menu>
    </div>
    <!-- 底部遮罩层 -->
    <!-- <div class="load" @closeL="close" v-if="loading"></div> -->
  </div>
</template>

<script>
import mobileMenu from '../components/mobile/menu.vue'
import foot from './Components/footer'
import webHead from './Components/head'
import contact from './Components/contact'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: { mobileMenu, foot, webHead, contact, swiper, swiperSlide },
  props: { banner: {}, router_path: {} },
  data() {
    return {
      contact_flag: false,
      contact_height: 0,
      scroll: 0,
      right_menu: false,
      loading: true,
      scrollToTop: 0,
      banner_list: [],
      head_show: false,
      pc_src: '',
      mobile_src: '',
      is_arr: false,
      banner_index: 0,
      startX: 0,
      startY: 0,
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        autoplayDisableOnInteraction: true,
        paginationClickable: true,
        pagination: {
          el: '.swiper-pagination',
          paginationType: 'custom'
        },
        navigation: {
          //最新版本的需要这样配置，按钮才有效
          prevEl: '.swiper-button-prev', //上一张
          nextEl: '.swiper-button-next' //下一张
        },
        mousewheelControl: true,
        observeParents: true
      },
      contact_show: false
    }
  },
  mounted() {
    this.scrollm
    setTimeout(() => {
      if (this.mobile_src instanceof Array) {
        setInterval(() => {
          this.bannerChanges(2)
        }, 5000)
      }
    }, 2000)

    window.addEventListener('scroll', this.handleScroll, true)
    // this.ishome()
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },

  methods: {
    // // 判断是否首页路由
    // ishome() {
    //   // console.log(this.$route.path)
    //   console(1111)
    // },
    handleScroll(e) {
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      if (this.scrollTop == 0) {
        var mo = function(e) {
          e.preventDefault()
        }
        document.body.style.overflow = '' //出现滚动条
        document.removeEventListener('touchmove', mo, false)
      }
      if (this.scrollTop > 100) {
        this.contact_height = 80
        this.wecan_flag = true
      } else {
        this.contact_height = 0
      }
    },
    // 回到顶部
    //   backTop() {
    //   const that = this
    //   let timer = setInterval(() => {
    //     let ispeed = Math.floor(-that.scrollTop / 30)
    //     document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
    //     if (that.scrollTop === 0) {
    //       clearInterval(timer)
    //     }
    //   }, 16)
    // },
    //  跳转到首页
    tohome() {
      if (this.$route.path == '/index/index/index') return false
      this.$router.push('/index/index/index')
    },
    slideChangeTransitionEnd() {
      var swiper = this.$refs.mySwiper_banner.swiper
      this.banner_index = swiper.realIndex
    },
    touchstart() {
      event.preventDefault() //阻止默认事件（长按的时候出现复制）

      this.startX = event.changedTouches[0].pageX
      this.startY = event.changedTouches[0].pageY
    },
    touchmove() {
      event.preventDefault()
      var moveEndX = event.changedTouches[0].pageX
      var moveEndY = event.changedTouches[0].pageY
      var X = moveEndX - this.startX
      var Y = moveEndY - this.startY
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        this.bannerChange(1)
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        this.bannerChange(2)
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      } else {
      }
    },
    changeBannerStyle() {
      var width = document.body.clientWidth
      return 'margin-left:-' + this.banner_index * width + 'px'
    },
    bannerChanges(e) {
      var len = this.mobile_src.length
      if (e == 1) {
        if (this.banner_index == 0) this.banner_index = len - 1
        else this.banner_index--
      } else {
        if (this.banner_index == len - 1) this.banner_index = 0
        else this.banner_index++
      }
    },
    changeBanner(key) {
      this.banner_index = key
      var swiper = this.$refs.mySwiper_banner.swiper
      swiper.slideToLoop(key, 1000, false) //切换到第一个slide，速度为1秒
    },
    // handleScroll(e) {
    //   this.scrollTop =
    //     e.target.documentElement.scrollTop || e.target.body.scrollTop; // 执行代码
    //   // console.log(scrollTop);
    // },
    backTop() {
      var mo = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', mo, false) //禁止页面滑动
      // var ju = (document.body.scrollTop = document.documentElement.scrollTop = 0);
      // window.Animation("scroll", ju);
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 30)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
      this.handleScroll()
    },
    // 遮罩层
    close(data) {
      // this.loading = data;
      // eslint-disable-next-line no-console
      console.log(data)
    },
    //打开关闭菜单
    setMenu() {
      this.right_menu = this.right_menu ? false : true
    },
    //关闭菜单
    closeMenu() {
      this.right_menu = false
    }
  },
  watch: {
    banner: {
      handler(v, o) {
        // console.log(v);
        if (this.banner.mobile && this.banner.pc) this.head_show = true
        this.pc_src = this.banner.pc.src

        if (this.banner.mobile instanceof Array) {
          this.is_arr = true
          this.mobile_src = this.banner.mobile
        } else {
          this.is_arr = false
          this.mobile_src = this.banner.mobile.src
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import url('../assets/css/index.css');
.banner-arr {
  width: 100%;
  /* height: 2rem; */
}
.banner-arr img {
  width: 100% !important;
}
.banner-arr-slide {
  z-index: 9;
}
.contact-box {
  position: fixed;
  right: 0;
  width: 80px;
  z-index: 999;
  background-color: #ffffff;
  transition: all 0.1s linear;
}
</style>